import React, { Component } from 'react'
import { browserHistory } from 'react-router';
import { TopHeader, SideAntd, Footer } from '../../components'
import Actions from '../../actions';
import Welcome from '../Welcome';
import cookie from 'react-cookie';
import { Icon } from 'antd';


export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            right: "",
            shouqi: "",
            isHideLeft: false,
            styleTheme: cookie.load("styleTheme") ? cookie.load("styleTheme") : "",
            children: this.props.children
        };
        this.menuLeft = this.menuLeft.bind(this);
        this.logoOnClick = this.logoOnClick.bind(this);
    }
    logoOnClick(){
        browserHistory.push('/main');
    }
    menuLeft() {
		this.refs.Top.handClick();
        let shouqi = this.state.shouqi;
        let right = this.state.right;
        let isHideLeft= this.state.isHideLeft;

        if (shouqi != "main-left-hide") {
            shouqi = "main-left-hide";
            right = "main-right-moveLeft";
            isHideLeft = true;
        } else {
            shouqi = "";
            right = "";
            isHideLeft = false;
        }
        this.setState({
            shouqi: shouqi,
            right: right,
            isHideLeft: isHideLeft
        })
        //左侧列表是否隐藏，list列表需要用到，如果隐藏给列表宽度加宽
        Actions.hideLeft(isHideLeft);
    }
    render() {
        return(
            <div className={"box " + this.state.styleTheme}>
                {/*侧边导航  start*/}
                <div className={"main-left " + this.state.shouqi} ref="Menu">
                    <div className="logo" onClick={this.logoOnClick}>COSMOPlat</div>

                    {/*<Accordion ref='Accordion' url="/base/resource/menu"/>*/}
                    <SideAntd ref='Accordion' addTabs={this.add} url="/base/resource/menu"/>

                </div>{/*侧边导航  end*/}
                {/*右侧内容  start*/}
                <div className={"main-right " + this.state.right}>
                    <TopHeader ref="Top" hck={this.menuLeft}/>
                    <div className="contentPage">
                        {this.props.children}
                    </div>
                    <Footer />
                </div>{/*右侧内容  end*/}
            </div>
        )
    }
}
